<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>fAnimate.css</title>
  <meta name="viewport" content="initial-scale=1, minimal-ui">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="site__header island">
  <div class="wrap">
   <span id="animationSandbox" style="display: block;" class=""><h1 class="site__title mega">fAnimate.css</h1></span>
  </div>
</header><!-- /.site__header -->

<main class="site__content island" role="content">
  <div class="wrap">
    <form>
      <select class="input input--dropdown js--animations">
        <optgroup label="Attention Seekers">
          <option value="snowDown">雪花飘落snowDown</option>
          <option value="fadeInJump">鼠标跳跃fadeInJump</option>
          <option value="ring">震铃ring</option>
          <option value="starFlick">星星闪烁starFlick</option>
          <option value="sunRotate">太阳旋转sunRotate</option>
          <option value="heartBeat">心跳heartBeat</option>
        </optgroup>
        <optgroup label="FadeShow">
          <option value="fadeInDown">fadeInDown</option>
          <option value="fadeInUp">fadeInUp</option>
          <option value="fadeInLeft">fadeInLeft</option>
          <option value="fadeInRight">fadeInRight</option>
        </optgroup>
        <optgroup label="Zoom">
          <option value="zoomIn">zoomIn</option>
          <option value="puffIn">puffIn</option>
          <option value="puffOut">puffOut</option>
        </optgroup>
      </select>

      <button class="butt js--triggerAnimation">Animate it</button>
    </form>
  </div>
</main><!-- /.site__content -->

<script src="js/jquery-1.10.2.min.js"></script>
<script>
  function testAnim(x) {
    $('#animationSandbox').removeClass().addClass(x).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });
  };

  $(document).ready(function(){
    $('.js--triggerAnimation').click(function(e){
      e.preventDefault();
      var anim = $('.js--animations').val();
      testAnim(anim);
    });

    $('.js--animations').change(function(){
      var anim = $(this).val();
      testAnim(anim);
    });
  });

</script>



</body></html>